// 特殊字体颜色
@logo-text: #303142;

.desktop-login {
	overflow: hidden;
	box-shadow: 0px 4px 14px rgba(197, 206, 227, 0.25);
	width: 458px;
	// height: 540px;
	// box-shadow: inset 0px 4px 22px rgba(160, 199, 255, 0.15);
	border-radius: 12px;
	// background: url(../../../assets/login/desktop_login.png) no-repeat;
	background: #ffffff;
	// background-size: 100% 100%;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -229px;
	margin-top: -270px;
	padding-bottom: 32px;

	.ant-input-suffix {
		position: absolute;
		right: 8px;
		height: 100%;
	}

	.go-back {
		position: absolute;
		left: 32px;
		top: 28px;
		cursor: pointer;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 44px;
		text-align: center;
		color: #646a73;
	}

	&-lang {
		position: absolute;
		right: 32px;
		top: 28px;

		.lang-active {
			width: 100%;
			height: 24px;
			line-height: 24px;
			color: @rok-text-color-secondary;
			font-size: 12px;
			display: inline-block;
			text-align: right;
			cursor: pointer;

			.lang-icon {
				font-size: 12px;
			}
		}
	}

	&-logo {
		padding-top: 64px;

		// margin: 64px auto 0 auto;
		.logo-box {
			margin: 0 auto;
			height: 50px;
			max-width: 100%;
			text-align: center;

			img {
				height: 100%;
			}
		}

		.logo-title {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 32px;
			line-height: 44px;
			text-align: center;
			color: #303142;
		}

		.logo-text {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			height: 75px;

			span {
				height: 100%;
				line-height: 75px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 20px;
				text-align: center;
				color: #646a73;
				cursor: pointer;
				position: relative;
				user-select: none;
			}

			.active {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 500;
				font-size: 22px;
				text-align: center;
				color: #1f2329;

				&::after {
					// content: '';
					// display: block;
					// border-width: 5px 5px 20px 20px;
					// border-color: #fff;
					// border-style: solid;
					// border-right-color: transparent;
					// border-bottom-color: transparent;
					// transform: rotateZ(45deg) translateX(-50%);
					// width: 0;
					// height: 0;
					// position: absolute;
					// bottom: -22px;
					// left: 50%;
					// pointer-events: none;

					content: '';
					display: block;
					width: 28px;
					height: 4px;
					background: #4c78fc;
					border-radius: 20px;
					pointer-events: none;
					margin: 0 auto;
					margin-top: -16px;
				}
			}
		}
	}

	&-info {
		padding: 21px 64px 0 64px;

		.ant-form-item-label > label {
			color: @rok-auxiliary-color;
			font-weight: normal !important;
			font-size: @rok-font-size-small;
		}

		.ant-form-item-label {
			padding: 0;
		}

		.ant-input {
			border: none;
			background: transparent;
			border-bottom: 1px solid @rok-border-color-base;
			border-radius: 0;
			padding: 4px 0;
		}

		.ant-input-affix-wrapper {
			background: transparent;
			border: none;
			border-bottom: 1px solid @rok-border-color-base;
			border-radius: 0;
			padding: 0;
			height: 32px;
		}

		.ant-input-affix-wrapper > input.ant-input {
			background: transparent;
		}
	}

	.outside-info {
		padding-bottom: 50px;
	}

	.info-password {
		margin-top: 15px;
	}

	.info-account {
		margin-top: 6px;

		.ant-checkbox + span {
			padding-left: 12px;
		}
	}

	.info-button {
		height: 42px;
		line-height: 42px;
		margin-top: 20px;
		background: @rok-primary-color;
		border-radius: 4px;
		width: 100%;
		text-align: center;
		color: @rok-white-color;
		font-weight: @rok-font-weight-bold;
		cursor: pointer;
	}

	.register-button {
		height: 42px;
		line-height: 42px;
		margin-top: 12px;
		background: #fff;
		border-radius: 4px;
		width: 100%;
		border: 1px solid #dee0e3;
		text-align: center;
		color: #646a73;
		font-weight: @rok-font-weight-bold;
		cursor: pointer;
	}

	.register-type-title {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #646a73;
		margin-bottom: 22px;
	}

	.register-list {
		padding: 0;
		height: 300px;
		overflow-y: scroll;

		li {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 42px;
			background: #ffffff;
			border: 1px solid #dee0e3;
			border-radius: 4px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: #1f2329;
			margin-bottom: 12px;
			cursor: pointer;
		}

		li:hover {
			background: #ebf1ff;
			border: 1px solid #658bfc;
			border-radius: 4px;
		}
	}

	&-mode {
		margin-top: 22px;
		display: flex;
		align-items: center;
		justify-content: center;

		.mode-line {
			min-width: 80px;
			max-width: 112px;
			height: 1px;
			background: @rok-border-color-base;
		}

		.mode-text {
			padding: 0 17px;
			font-size: @rok-font-size-small;
			color: @rok-auxiliary-color;
		}
	}

	.mode-icon {
		&-box {
			margin: 0 auto;
			width: 34px;
			height: 34px;
			border: 1px solid @rok-border-color-base;
			background: @rok-white-bg;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;

			&:hover {
				background: @rok-hover-color;
				cursor: pointer;
			}

			img {
				width: 16px;
				height: 13.5px;
			}
		}
	}
	.mode-tip {
		width: 100%;
		text-align: center;
		font-size: 12px;
		color: @rok-auxiliary-color;
		margin-top: 5px;
	}
}

.lang-list {
	width: 116px;
	padding: 8px 0;
	background: @rok-white-bg;
	box-shadow: 0px 4px 20px rgba(106, 114, 146, 0.2);
	border-radius: 2px;

	&-item {
		display: inline-block;
		height: 32px;
		line-height: 32px;
		cursor: pointer;
		width: 100%;
		padding: 0 18px;

		&:hover {
			background: @rok-hover-color;
		}
	}

	.active {
		position: relative;
	}

	.active::after {
		content: '';
		width: 2px;
		height: 32px;
		background: @rok-primary-color;
		position: absolute;
		left: 0;
		top: 0;
	}
}
